<template>
  <div class="address-book-container">
    <el-table :data="addressList" stripe style="width: 100%" class="custom-table">
      <el-table-column prop="consignee" label="收货人" align="center"></el-table-column>
      <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
      <el-table-column prop="detail" label="详细地址" align="center" width="500"></el-table-column>
     <el-table-column prop="操作" label="操作" align="center" width="300">
  <template v-slot="scope">
    <el-button size="mini" class="edit-btn" style="width: 100px;" @click="editAddress(scope.row)">编辑</el-button>
    <el-button size="mini" class="delete-btn" type="danger" style="width: 70px;" @click="deleteAddress(scope.row.id)">删除</el-button>
    <el-button
      size="mini"
      v-if="scope.row.isDefault === 0"
      @click="setDefault(scope.row.id)"
      class="default-btn"
      style="width: 70px;"
    >
      设为默认
    </el-button>
    <i v-else class="el-icon-star-on default-icon" title="默认地址" style="width: 80px;"></i>
  </template>
</el-table-column>
    </el-table>

    <el-button type="primary" class="add-btn" @click="openAddDialog">新增地址</el-button>

    <el-dialog :title="isEdit ? '编辑地址' : '新增地址'" :visible.sync="dialogVisible">
      <el-form :model="currentAddress" ref="addressForm" :rules="rules" label-width="80px">
        <el-form-item label="收货人" prop="consignee">
          <el-input v-model="currentAddress.consignee" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="currentAddress.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="detail">
          <el-input v-model="currentAddress.detail" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="save-btn" :loading="isSaving" @click="saveAddress">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
      dialogVisible: false,
      isEdit: false,
      currentAddress: { id: null, consignee: "", phone: "", detail: "" },
      isSaving: false, // 保存按钮的加载状态
      rules: {
        consignee: [{ required: true, message: "请输入收货人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        detail: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
      },
    };
  },
  methods: {
    getAddressList() {
      this.$http.get("/webPage/addressBook/getAll").then((res) => {
        this.addressList = res.data.data;
      });
    },
    openAddDialog() {
      this.isEdit = false;
      this.currentAddress = { id: null, consignee: "", phone: "", detail: "" };
      this.dialogVisible = true;
    },
    editAddress(address) {
      this.isEdit = true;
      this.currentAddress = { ...address };
      this.dialogVisible = true;
    },
    saveAddress() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          this.isSaving = true; // 显示加载动画
          if (this.isEdit) {
            this.$http.put("/webPage/addressBook", this.currentAddress).then(() => {
              this.$message.success("地址修改成功");
              this.getAddressList();
              this.dialogVisible = false;
              this.isSaving = false; // 取消加载状态
            });
          } else {
            this.$http.post("/webPage/addressBook", this.currentAddress).then(() => {
              this.$message.success("地址新增成功");
              this.getAddressList();
              this.dialogVisible = false;
              this.isSaving = false;
            });
          }
        }
      });
    },
    deleteAddress(id) {
      this.$confirm("确定删除该地址吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.delete(`/webPage/addressBook`, { params: { id } }).then(() => {
          this.$message.success("地址删除成功");
          this.getAddressList();
        });
      }).catch(() => {
        this.$message.info("已取消删除操作"); // 处理取消后的提示
      });
    },
    setDefault(id) {
      this.$http.put("/webPage/addressBook/default", { id }).then(() => {
        this.$message.success("默认地址设置成功");
        this.getAddressList();
      });
    },
  },
  created() {
    this.getAddressList();
  },
};
</script>

<style scoped>
.address-book-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.custom-table {
  margin-bottom: 20px;
}

.edit-btn {
  color: #409eff;
}
.delete-btn {
  color: #d35050;
  display: inline-block;
}

.default-btn {
  color: #67c23a;
}

.default-icon {
  color: #e6a23c;
  font-size: 20px;
}

.add-btn {
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}

.save-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-input {
  width: 100%;
}

.el-button {
  margin-left: 5px;
}
</style>